<template>
  <div class="right-select-event">
    <div class="title">
      <i class="jy-icon-arrow-left" @click.stop="onHiddenSelectEvent($event)"></i>选择事件
    </div>
    <div class="edit-handles-con margin-top-50 ">
      <el-divider content-position="center">非微博事件</el-divider>
      <p class="margin-left-right-16">控件类：</p>
      <ul>
        <li v-for="(item, index) in events.control" :key="index" @click.stop="onUpdateEvent(item)" @mouseover="onHover(item)" @mouseout="onOut(item)">
          <i :class="item.isHover ? EVENT_HOVER_TYPES[item.type].classStrHover : EVENT_HOVER_TYPES[item.type].classStr"></i>
          <p>{{EVENT_HOVER_TYPES[item.type].label}}</p>
        </li>
      </ul>
      <p class="margin-left-right-16">链接类：</p>
      <ul>
        <li v-for="(item, index) in events.link" :key="index" @click.stop="onUpdateEvent(item)" @mouseover="onHover(item)" @mouseout="onOut(item)">
          <i :class="item.isHover ? EVENT_HOVER_TYPES[item.type].classStrHover : EVENT_HOVER_TYPES[item.type].classStr"></i>
          <p>{{EVENT_HOVER_TYPES[item.type].label}}</p>
        </li>
      </ul>
     <el-divider content-position="center">微博事件</el-divider>
      <ul>
        <li v-for="(item, index) in events.wb" :key="index" @click.stop="onUpdateEvent(item)" @mouseover="onHover(item)" @mouseout="onOut(item)">
          <i :class="item.isHover ? EVENT_HOVER_TYPES[item.type].classStrHover : EVENT_HOVER_TYPES[item.type].classStr"></i>
          <p>{{EVENT_HOVER_TYPES[item.type].label}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import { EVENT_TYPES, EVENT_HOVER_TYPES } from "@/common/events"
import { MAIL_DAIL_COMP_TYPES } from '@/common/const-wb'

export default {
  name: "RightSelectEvent",
  setup () {
    return {
      events: _.cloneDeep(EVENT_TYPES),
      EVENT_HOVER_TYPES: EVENT_HOVER_TYPES,
    };
  },
  components: {},
  computed: {
    ...mapState({
      selectEvent: (state) => state.selectEvent,
      componentData: (state) => (state.components.currentComponentData),
    }),
    ...mapGetters("components", {
      pops: "getPopPages"
    }),
  },
  methods: {
    ...mapActions({
      addEvent: "components/addEvent",
      deleteEvent: "components/deleteEvent",
      changeSelectEventPlane: "changeSelectEventPlane",
    }),
    showAlert(content) {
      this.$dialog.alert({
        title: '',
        message: content,
      })
    },
    onUpdateEvent(item) {
      if(item.type == EVENT_HOVER_TYPES.layer.type && this.pops.length <= 0){
        this.showAlert("您还没有弹出图层呢，点击左侧面板的【弹层】旁边的【+】按钮创建一个吧")
        return;
      }else if(item.type == EVENT_HOVER_TYPES.dial.type || item.type == EVENT_HOVER_TYPES.email.type){
        if(MAIL_DAIL_COMP_TYPES.indexOf(this.componentData.cid) == -1){
          this.showAlert("只有文本，图片和按钮组件可以添加【拨打电话】和【邮件】事件！！")
          return
        }
      }
      let type = this.selectEvent.type;
      if(type.length > 0){
        this.deleteEvent({type,  controlId: item.controlId});
      }
      this.addEvent({ event: item });
      this.changeSelectEventPlane({isActive: false, type});
    },
    onHiddenSelectEvent(e){
      e.stopPropagation();
      e.preventDefault();
      this.changeSelectEventPlane({isActive: false, type:''});
    },
    onHover(item){
      item.isHover = true;
    },
    onOut(item){
      item.isHover = false;
    },
  },

};
</script>
<style lang="scss">
.right-select-event {
  .title {
    background-color:var(--color-blue);
    padding: 10px;
    color: #FFFFFF;
  }
  .jy-icon-arrow-left {
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
  }
  ul{
    padding: 0 16px;
  }
  li{
    display: inline-block;
    font-size: 12px;
    margin: 10px;
    text-align: center;
    width: 60px;

    p{
      margin-top: 4px;
    }

    &:hover{
      color: var(--color-blue);
    }
  }

}
</style>
